<p-table [value]="items" [columns]="cols" scrollHeight="300px" scrollable="true">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th style="width:55px;padding: 0.25em 0.857em;">
                <button type="button" class="ui-button-success button-small" pButton (click)="addItem(item)"
                    icon="fa fa-plus"></button>
            </th>
            <th *ngFor="let col of columns" [style.width]="col.width" [pSortableColumn]="col.field">
                {{col.header}}
                <p-sortIcon [field]="col.field"></p-sortIcon>
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-item>
        <tr>
            <td style="width:55px;padding: 0.25em 0.857em;">
                <button type="button" class="ui-button-danger button-small" pButton (click)="deleteItem(item)"
                    icon="fa fa-times"></button>
            </td>
            <td pEditableColumn>
                <p-cellEditor>
                    <ng-template pTemplate="input">
                        <input pInputText type="text" [(ngModel)]="rowData.label">
                    </ng-template>
                    <ng-template pTemplate="output">
                        {{rowData.label}}
                    </ng-template>
                </p-cellEditor>
            </td>
            <td pEditableColumn>
                <p-cellEditor>
                    <ng-template pTemplate="input">
                        <input pInputText type="text" [(ngModel)]="rowData.value">
                    </ng-template>
                    <ng-template pTemplate="output">
                        {{rowData.value}}
                    </ng-template>
                </p-cellEditor>
            </td>
            <td style="width:120px;text-align:center" pEditableColumn>
                <p-cellEditor>
                    <ng-template pTemplate="input">
                        <input pInputText type="number" [(ngModel)]="rowData.displayOrder">
                    </ng-template>
                    <ng-template pTemplate="output">
                        {{rowData.displayOrder}}
                    </ng-template>
                </p-cellEditor>
            </td>
        </tr>
    </ng-template>
</p-table>
<div class="button-item">
    <button pButton type="button" class="ui-button-danger" icon="fa fa-times" label="取消" (click)="cancel()"></button>
    <button pButton type="button" class="ui-button-info" icon="fa fa-plus" label="保存" (click)="save()"></button>
</div>